<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沉浸式翻译 - 现代双语翻译解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .hero-bg {
            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #0085FF 100%);
        }
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .highlight {
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 90%;
        }
        .mermaid-title {
            font-family: 'Noto Sans SC';
            font-weight: 500;
            text-align: center;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body class="antialiased bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">沉浸式翻译</h1>
                <p class="text-xl mb-8 opacity-90">跨越语言障碍，体验无缝双语阅读</p>
                <p class="text-lg mb-8 leading-relaxed">一款革命性的实时翻译工具，支持网页、文档、电子书和视频字幕的多语言互译，为您打造真正的沉浸式语言学习与阅读体验。</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#features" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300">探索功能</a>
                    <a href="#install" class="border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-full font-medium transition duration-300">立即安装</a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative w-full max-w-md">
                    <div class="absolute -top-4 -left-4 w-full h-full border-2 border-white opacity-20 rounded-xl"></div>
                    <div class="relative bg-white rounded-xl p-4 shadow-2xl">
                        <div class="flex items-center mb-4">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <p class="text-gray-800">The future of language translation is here.</p>
                                <p class="text-gray-600 text-sm mt-1">语言翻译的未来已经到来。</p>
                            </div>
                            <div>
                                <p class="text-gray-800">Seamless bilingual reading experience.</p>
                                <p class="text-gray-600 text-sm mt-1">无缝的双语阅读体验。</p>
                            </div>
                            <div>
                                <p class="text-gray-800">Break language barriers with AI-powered translation.</p>
                                <p class="text-gray-600 text-sm mt-1">通过AI驱动的翻译打破语言障碍。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">核心功能特点</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">专为现代数字生活设计的全方位翻译解决方案</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
                <div class="feature-card bg-white p-8">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-globe text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">网页翻译</h3>
                    </div>
                    <p class="text-gray-600">实时翻译整页内容，保留原格式布局，支持双语对照模式，让您轻松阅读外文网站。</p>
                </div>
                
                <div class="feature-card bg-white p-8">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-file-alt text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">PDF/EPUB 翻译</h3>
                    </div>
                    <p class="text-gray-600">本地或在线PDF、EPUB电子书翻译，无需上传服务器，保障您的隐私安全。</p>
                </div>
                
                <div class="feature-card bg-white p-8">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-robot text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">AI 辅助翻译</h3>
                    </div>
                    <p class="text-gray-600">整合GPT、DeepL等先进AI模型，提供更自然、准确的翻译结果，理解上下文语义。</p>
                </div>
                
                <div class="feature-card bg-white p-8">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-closed-captioning text-red-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">字幕翻译</h3>
                    </div>
                    <p class="text-gray-600">支持YouTube、Netflix等平台字幕翻译，双语对照显示，打造沉浸式观影体验。</p>
                </div>
            </div>
            
            <!-- Visualization -->
            <div class="bg-white p-8 rounded-xl shadow-lg mb-16">
                <h3 class="text-2xl font-bold mb-6 font-serif text-center">沉浸式翻译应用场景</h3>
                <div class="mermaid">
                    graph TD
                    A[沉浸式翻译] --> B[网页浏览]
                    A --> C[文档阅读]
                    A --> D[视频学习]
                    B --> B1[技术文档]
                    B --> B2[新闻资讯]
                    B --> B3[社交媒体]
                    C --> C1[PDF/EPUB]
                    C --> C2[学术论文]
                    C --> C3[电子书]
                    D --> D1[YouTube]
                    D --> D2[Netflix]
                    D --> D3[在线课程]
                </div>
            </div>
            
            <div class="text-center">
                <h3 class="text-2xl font-bold mb-4 font-serif">适用人群</h3>
                <div class="flex flex-wrap justify-center gap-4">
                    <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full">开发者</span>
                    <span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full">学生/研究人员</span>
                    <span class="px-4 py-2 bg-green-100 text-green-800 rounded-full">语言学习者</span>
                    <span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full">跨国职场人士</span>
                    <span class="px-4 py-2 bg-red-100 text-red-800 rounded-full">视频爱好者</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="install" class="py-20 px-4 bg-gray-100">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">安装指南</h2>
                <p class="text-xl text-gray-600">简单几步，开启您的双语体验之旅</p>
            </div>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-lg mb-16">
                <div class="p-6 bg-blue-600 text-white">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-globe mr-3"></i> 浏览器扩展安装
                    </h3>
                </div>
                <div class="p-8">
                    <ol class="space-y-6">
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-bold">1</div>
                            </div>
                            <div>
                                <h4 class="font-medium">访问官网或浏览器插件商店</h4>
                                <p class="text-gray-600 mt-1">
                                    <a href="https://chrome.google.com/webstore/detail/immersive-translate/" class="text-blue-600 hover:underline mr-4">Chrome 商店</a>
                                    <a href="https://microsoftedge.microsoft.com/addons/detail/immersive-translate/" class="text-blue-600 hover:underline">Edge 商店</a>
                                </p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-bold">2</div>
                            </div>
                            <div>
                                <h4 class="font-medium">点击"添加至 Chrome/Edge"</h4>
                                <p class="text-gray-600 mt-1">确认安装，等待安装完成</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-bold">3</div>
                            </div>
                            <div>
                                <h4 class="font-medium">开始使用</h4>
                                <p class="text-gray-600 mt-1">点击浏览器扩展栏的"沉浸式翻译"图标，即可开始使用</p>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-lg">
                <div class="p-6 bg-purple-600 text-white">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-desktop mr-3"></i> 本地客户端安装（可选）
                    </h3>
                </div>
                <div class="p-8">
                    <ol class="space-y-6">
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-purple-100 text-purple-600 font-bold">1</div>
                            </div>
                            <div>
                                <h4 class="font-medium">访问下载页面</h4>
                                <p class="text-gray-600 mt-1">
                                    <a href="https://immersivetranslate.com/downloads" class="text-purple-600 hover:underline">选择适合您系统的版本</a>
                                </p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-purple-100 text-purple-600 font-bold">2</div>
                            </div>
                            <div>
                                <h4 class="font-medium">安装应用程序</h4>
                                <p class="text-gray-600 mt-1">下载后双击安装包，按照提示完成安装</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-purple-100 text-purple-600 font-bold">3</div>
                            </div>
                            <div>
                                <h4 class="font-medium">配置和使用</h4>
                                <p class="text-gray-600 mt-1">启动应用，根据需求配置翻译引擎和显示模式</p>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Guide -->
    <section class="py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">使用指南</h2>
                <p class="text-xl text-gray-600">掌握这些技巧，让翻译体验更流畅</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-blue-600 text-4xl mb-4">
                        <i class="fas fa-mouse-pointer"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">网页翻译</h3>
                    <p class="text-gray-600">打开任意外语网页，点击插件图标，选择"翻译整个页面"即可实现即时翻译。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-green-600 text-4xl mb-4">
                        <i class="fas fa-highlighter"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">划词翻译</h3>
                    <p class="text-gray-600">选中文本后，悬浮翻译窗口自动显示翻译结果，支持双语对照。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-purple-600 text-4xl mb-4">
                        <i class="fas fa-file-upload"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">文件翻译</h3>
                    <p class="text-gray-600">在扩展内上传PDF/EPUB文件，即可获得保留原格式的双语对照文档。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-blue-600 text-white">
        <div class="container mx-auto max-w-3xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">准备好打破语言障碍了吗？</h2>
            <p class="text-xl mb-8 opacity-90">立即安装沉浸式翻译，开启您的无缝双语体验</p>
            <a href="https://immersivetranslate.com/" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-full text-lg font-medium transition duration-300 shadow-lg">
                访问官网 <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <p class="text-xl font-medium text-white">技术小馆</p>
                    <p class="mt-2">探索技术的无限可能</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300">
                        <i class="fas fa-link mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
                <p>© 2023 沉浸式翻译. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            },
            fontFamily: "'Noto Sans SC', sans-serif"
        });
    </script>
</body>
</html>